<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <!-- 该设置用于适应多种设备（如pc、平板和手机等）设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css">
    <title>优印生产在线</title>


    <style type="text/css">
        html {
            height: 100%;

        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px;

            overflow:auto;
        }

        .my-container {

            position: fixed;
            top: 0px;
            /*bottom:0px;*/
            left: 0px;
            /*right:0px;*/

            background-color: #FFDDDD;

            width: 100%;
            height: 100%;
            min-width: 900px;
            min-height: 600px;

            

        }

        .my-title {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 50px;

            background-color: #111122;

            
        }
        .my-title>.my-logo{
            color: #AAAAAA;
            font-size: 24px;
            font-weight: bold;
            line-height: 50px;
            padding-left: 5px;
        } 

        .my-title>.my-setting{
            position: absolute;
            right:10px;
            bottom:5px;

            color:#EEEEEE;
            font-size:14px;

            cursor:pointer;
        }

        .my-nav {
            position: absolute;
            left: 0px;
            top: 50px;
            bottom: 30px;

            width: 150px;

            background-color: #222222;

            font-size: 14px;

        }

        .my-content {
            position: absolute;
            left: 150px;
            top: 50px;
            bottom: 30px;
            right: 0px;

            background-color: #FFFFFF;

        }

        .my-content>iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .my-copyright {

            position: absolute;
            left: 0px;
            bottom: 0px;
            width: 100%;
            height: 30px;

            background-color: #111122;


            color: #CCCCCC;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
        }

        .my-main {
            color: #AAAAAA;
            padding: 8px 15px;
            cursor: pointer;
        }

        .my-main:hover {
            color: #FFFFFF;
        }

        .my-sub {

            display: flex;
            flex-direction: column;
            align-items: flex-start;

            /*交叉轴与开头对齐*/

            padding-bottom:5px;

        }

        .my-item {
            margin-left: 23px;
            padding: 5px 8px;
            border-radius: 10px;
        }

        .my-item:link,
        .my-item:visited {
            text-decoration: none;
            color: #AAAAAA;
        }

        .my-item:hover {
            color: #FFFFFF;
            font-weight: bold;
        }
    </style>


</head>

<body>

    <div class="my-container" id="app">

        <div class="my-title">
            <div class="my-logo">优印生产在线</div>
            <div class="dropdown my-setting">
                <div class="dropdown-toggle" data-toggle="dropdown">当前用户：<i class="fa fa-user"></i> <span v-if="currUser">{{currUser.userId}}</span></div>
                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item"  href="#">密码修改</a>
                    <a class="dropdown-item"  href="#" @click.prevent="logout"  >安全退出</a>
                </div>
            </div>
        </div>

        <div class="my-nav">

            <div class="accordion" id="my-menu">

                <!-- 菜单单元开始 -->
                <div v-for="main in menuList">
                    <div class="my-main" data-toggle="collapse" :data-target="'#my-'+main.menuId">

                        {{main.menuName}}

                    </div>

                    <div :id="'my-'+main.menuId" class="collapse my-sub" data-parent="#my-menu">

                        <a v-for="sub in main.subMenuList" class="my-item" :href="'../..'+sub.menuUrl"
                            target="contentFrame">{{sub.menuName}}</a>


                    </div>
                </div>
                <!-- 菜单单元结束 -->






            </div>

        </div>

        <div class="my-content"><iframe name="contentFrame"></iframe></div>

        <div class="my-copyright">版权所有：&copy; 2010 - 2019 优印信息科技有限公司</div>


    </div>

</body>




<script src="../../js/vue.min.js"></script>
<script src="../../js/axios.min.js"></script>

<script src="../../js/jquery-3.3.1.slim.min.js"></script>
<script src="../../js/popper.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../layer/layer.js"></script>

<script src="../../js/my.js"></script>


<script type="text/javascript">
    
    //获取当前用户
    const getCurrUser = function(){
        this.$myGet('/safty-home/user')
            .then((currUser)=>{
                this.currUser=currUser;

                this.$myGet('/safty-home/menu')
                .then((menuList) => {
                    this.menuList = menuList;
                });

            });
    };

    //退出系统
    const logout = function(){
        this.$myDelete('/safty-home/user')
            .then(()=>{
                setTimeout(()=>{
                    //请注意此处的top.location.href=‘...’是指让顶级窗口跳转某地址，而不是内嵌框架跳转。
                    top.location.href='../../safty/login/index.html';
                },1500);
            });
    };

    let vm = new Vue({
        el: '#app',
        data: {//数据
            menuList: [],
            currUser:null,//当前用户
        },
        methods: {//方法

            getCurrUser,//获取当前用户
            logout,//退出系统

        },
        mounted() {//页面渲染完之后立即执行的代码
            

            this.getCurrUser();
        }

    });

</script>


</html>